<template name="index-product">
    <view class="container">
        <u-scroll-list :indicator="false">
            <view class="scroll">
                <view class="item" v-for="item in product" :key="item.id" @click="navigateTo(item)">
                    <u-image
                        :src="item.mainImg"
                        width="218rpx"
                        height="218rpx"
                        radius="16rpx"
                    ></u-image>
                    <view class="product-name">
                        <u-text
                            :lines="1"
                            :text="item.name"
                            color="#000000"
                            size="26rpx"
                        ></u-text>
                    </view>
                    <u-text
                        bold
                        color="#356CE7"
                        :text="item.price"
                        size="34rpx"
                        :lines="1"
                        prefixIcon="rmb"
                        iconStyle="font-size: 22rpx; color: #356CE7; font-weight: bold;top:10rpx"
                    >
                    </u-text>
                    <view class="nft-tag" v-if="item.type != 'shop' && isShowTags=='1'"></view>
                </view>
            </view>
        </u-scroll-list>
        <!--view class="item" v-for="item in product" :key="item.id" @click="navigateTo(item.id)">
            <view class="mainimg">
                <image :src="item.mainImg"></image>
                <view class="sold" v-if="item.stock <= 0">
                    <u-icon name="/static/icon_sold_out.png" size="80rpx"></u-icon>
                </view>
            </view>
            <view class="product-info">
                <view class="ml">
                    <view class="product-name">
                        <u--text
                            :text="item.name"
                            size="28"
                            block
                            color="#000000"
                            :lines="2"
                        ></u--text>
                    </view>
                    <view class="nft-tag" v-if="item.type != 'shop' && isShowTags=='1'"></view>
                    <view class="nft-none" v-else></view>
                    <view class="price">
                        <text>¥</text>
                        <text style="font-size: 28rpx">{{ item.price }}</text>
                    </view>
                </view>
            </view>
        </view--->
    </view>
</template>
<script>
export default {
    name: "index-product",
    props: {
        product: {
            type: Array,
            default: []
        }
    },
    data() {
        return {

        }
    },
    computed: {
        isShowTags() {
            return this.$store.getters.isShowTags
        }
    },
    methods: {
        navigateTo(product) {
            uni.$u.route({
                url: product.type == 'nft' ? 'pages/nftDetail/index':'pages/productDetail/index',
                params: {
                    productId: product.id
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .container {
        padding: 0 20rpx;
        overflow: hidden;
        .scroll {
            display: flex;
            overflow-x: auto;
            height: 330rpx;
            .item {
                width: 218rpx;
                margin-right: 20rpx;
                position: relative;
                .product-name {
                    margin: 8rpx 0;
                }
                .nft-tag {
                    width: 80rpx;
                    height: 32rpx;
                    background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/967825cfb630bf72832c10b8d3ed3d64ad249bc8.png) no-repeat;
                    background-size: 100% 100%;
                    position: absolute;
                    top: 10rpx;
                    left: 10rpx;
                }
            }
        }

        //overflow-x: auto;
        //white-space:nowrap;
        /*.item {
            width: 628rpx;
            position: relative;
            display: inline-block;
            margin-right: 20rpx;
            &:last-child {
                margin-right: 0;
            }
            .mainimg {
                margin-left: 12rpx;
                position: relative;
                width: 246rpx;
                height: 246rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
                .sold {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -40rpx;
                    margin-left: -40rpx;
                }
            }
            .product-info {
                white-space:normal;
                box-sizing: border-box;
                width: 628rpx;
                height: 210rpx;
                border: 1px solid #979797;
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -105rpx;
                z-index: -1;
                padding: 20rpx;
                .ml {
                    margin-left: 258rpx;
                }
                .product-name {
                    height: 80rpx;
                }
                .nft-tag {
                    width: 100rpx;
                    height: 40rpx;
                    background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/967825cfb630bf72832c10b8d3ed3d64ad249bc8.png) no-repeat;
                    background-size: 100% 100%;
                    margin-top: 10rpx;
                }
                .nft-none {
                    width: 100rpx;
                    height: 36rpx;
                    margin-top: 10rpx;
                }
                .price {
                    padding: 5rpx 33rpx 0 33rpx;
                    background: #000000;
                    float: right;
                }
                text {
                    font-size: 22rpx;
                    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 40rpx;
                }
            }
        }*/
    }
</style>
